import { List, Modal, Grid, DatePickerView, Toast } from 'antd-mobile';
import { Button, Divider, Alert, Image } from 'antd';
import moment from 'moment';
import React, { useState } from 'react';
import { connect, history, useRequest } from 'umi';
import { ArrowRightOutlined } from '@ant-design/icons';
import BackIcon from '@/components/BackIcon';
import { useEffect } from 'react';
import { putFetch } from '@/utils/doFetch';
import { useMemo } from 'react';
import PublicList from '@/components/PublicList';
import { payment_order, payment } from '@/services/factory';
import styles from './index.less';

let Payment = connect(({ global, loading }) => ({
  global,
  loading,
}))(({ global: { userinfo, companies } }) => {
  let [data, setdata] = useState([]);
  useEffect(() => {
    payment({ company_id: companies?.id }).then((res) => {
      setdata(res?.data);
    });
  }, []);

  return (
    <div>
      <div className={styles.adds}>
        <BackIcon></BackIcon>
        <div style={{ fontSize: 16 }} className="oneline">
          付款方式
        </div>
      </div>

      {data.map((rowdata, i) => {
        return (
          <List
            key={i}
            renderHeader={() => (
              <span
                style={{
                  display: 'block',
                  padding: 15,
                  fontSize: 16,
                  color: '#000',
                }}
              >
                {rowdata?.name}
              </span>
            )}
          >
            {[
              {
                title: '账号',
                dataIndex: 'account',
                key: 'account',
                search: false,
              },
              {
                title: '账号名称',
                dataIndex: 'account_name',
                key: 'account_name',
                search: false,
              },
              {
                title: '开户行',
                dataIndex: 'bank',
                key: 'bank',
                search: false,
              },
              {
                title: '收款码',
                dataIndex: 'origin_url',
                key: 'origin_url',
                search: false,
                render: (_, record) => {
                  return (
                    <Image
                      src={record.origin_url || require('@/assets/default.png')}
                      width={30}
                      height={30}
                    ></Image>
                  );
                },
              },
            ].map((it) => {
              return (
                <List.Item
                  key={it.key}
                  extra={it.render ? it.render(null, rowdata) : rowdata[it.key]}
                >
                  {it.title}
                </List.Item>
              );
            })}
          </List>
        );
      })}
    </div>
  );
});

export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Payment);
